<template>
  <el-dialog
    title="提示"
    :visible="rolesDialogVisible"
    width="30%"
    @close="closeFn"
  >
    <!-- 用树形结构--显示复选框--渲染角色列表 -->
    <el-tree
      ref="tree"
      :data="rolesList"
      :props="props"
      show-checkbox
      node-key="id"
      @check="handleCheckChange"
    />
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeFn">取 消</el-button>
      <el-button type="primary" @click="confirmFn">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getUerInfoById, editUser } from '@/api/employees'
export default {
  props: {
    rolesList: {
      type: Array,
      require: true
    },
    rolesDialogVisible: {
      type: Boolean,
      require: true
    }
  },
  data() {
    return {
      userInfo: {},
      checkList: [],
      props: {
        label: 'title'
      }
    }
  },
  methods: {
    // 点击--修改--选项的勾选状态
    handleCheckChange(data) {
      console.log('被勾选的选项的id-49', data.id)
      console.log('50-已经有的角色的id', this.checkList)
      if (!this.checkList.includes(data.id)) {
        this.checkList.push(data.id)
        console.log('新分配给员工的角色id', this.checkList)
      } else {
        this.checkList = this.checkList.filter(item => item !== data.id)
        console.log('取消员工的角色id', this.checkList)
      }
      console.log('被勾选的选择放进数组后-56', this.checkList)
    },
    // 关闭弹窗--清空被点击的用户信息--和--勾选项目
    closeFn() {
      this.userInfo = {}
      this.checkList = []
      this.$emit('update:rolesDialogVisible', false)
    },
    // 确认-分配--被点击的用户的角色
    async confirmFn() {
      /*  文档上 接口需要的roles参数 是 角色 id
          所以 checkList 数组 存的 也是 被分配好的 角色 id
      */
      this.userInfo.roles = this.checkList
      await editUser(this.userInfo)
      this.closeFn()
    },
    // 弹窗显示时候--回显--角色的勾选状态
    isChecked() {
      this.$refs.tree.setCheckedKeys(this.checkList)
    },
    // 根据id--加载被点击用户的的信息
    async loadUserInfoById(id) {
      // 清空上一次分配角色的id
      this.checkList = []
      const res = await getUerInfoById(id)
      this.userInfo = res.data
      const arr = res.data.roles
      // console.log('74-被点击的员工的角色列表', arr)
      /* 把用户已有的角色的id--存进数组 */
      arr.forEach(obj => {
        this.checkList.push(obj.id)
      })
      // console.log('78-被点击的员工的角色列表id', this.checkList)
      // console.log('80-所有角色列表', this.rolesList)
    }
  }
}
</script>

<style>

</style>
